{% extends "jogo/base.html" %}

{% block tela %}
	{% load osindicados_filters %}

    <div id="loading_inicio">
	    <img src="/osindicadosmedia/img/tv_carregando.png" style="margin-top: -5px; position: absolute; z-index:1;">
	    <img src="/osindicadosmedia/img/ajax-loader_pergunta.gif" style="margin-left:580px; margin-top: 410px; position: absolute; z-index:2;">
    </div>

	<a href="#" onclick="$('#timer').countdown('pause'); return false;">.</a>
	
	<div id="pergunta-titulo"> 
	   <h1 style="text-align: center;">
	       Pergunta {{ respondidas|add:"1"}}/25 (tema: {{ pergunta.idAssunto.id|getImagem|safe }})
	   </h1>
	</div>
	
	<div id="replace">
		<div id="alternativas">
		
			<br/>
			<div id="form-pergunta">
				<form method="post" action="../responder/" name="responder_frm" id="responder_frm" onsubmit="$('#hr').get(0).value = new Date().getTime()/1000">
				<h2>{{ pergunta.enunciado }}</h2>
					{% csrf_token %}
						{% for alternativa in alternativas %}
							  <input type="radio" name="alternativa" value="{{alternativa}}" id="radio{{forloop.counter}}" {% if eliminadas and alternativa in eliminadas %}disabled{% endif %}/>
							  <label for="radio{{forloop.counter}}" class="alternativa{% if eliminadas and alternativa in eliminadas %}eliminada{% endif %}">
							     {{ alternativa }}
							  </label> 
							  <br/>
						{% endfor %}
					
					<input type="hidden" name="perguntaId" value="{{pergunta.id}}"/>
					<input type="hidden" name="hr" value="" id="hr"/>
					<input type="submit" value="responder" onclick="if(!verificarSelecao()) return false;" style="margin-left: 223px; margin-top: 30px;"/>
				</form>
			</div>
		</div>
	</div>
		
	<!-- <h1>Pergunta:</h1> (faltam {{ respondidas|faltam }} perguntas) -->
    
    <!-- Dificuldade: Amador <br/> -->
    
    
    <!-- Seu Placar: {{ placar }} -->

    <!-- <h1>Tempo</h1> -->
    
    <div id="timer" style="text-align: center;"></div>
    <div id="divloading" style="display: none;">
	    <img style="border-style: none;" src="/osindicadosmedia/img/ajax-loader.gif">
    </div>
    
    
    <div id="timeroptions" style="display: none;">
	    <a href="#" onclick="$('#timer').countdown({until: +30, format: 'S', compact: true, onExpiry: liftOff, serverSync: serverTime}); return false;">Iniciar</a>
	    <a href="#" onclick="$('#timer').countdown('destroy'); return false;">Destruir</a>
	    <a href="#" onclick="$('#timer').countdown('change', {until: (($('#timer').countdown('getTimes'))[6]+30)}); aumentarTempo(); return false;">Aumentar tempo</a>
	    <a href="#" onclick="$('#timer').countdown('pause'); return false;">Pausar</a>
	    <a href="#" onclick="$('#timer').countdown('resume'); return false;">Continuar</a>
    </div>
    
	
	
	<div id="placar">
       	
       	{% for tema in confs.temas %}
           {{tema|printTema:placar|safe}}
        {% endfor %}
       	
	</div>
	
	<!-- <h1>Ajudas Dispon&iacute;veis</h1> -->
	<br/><br/>
	
		<div id="ajudas">
			 
			<div style="display:none;">
			 <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/strikethroughdisabled.png">
			 <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/ampulhetadisabled.jpg">
			 <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/starblack.png">
			</div>
			 
			<!--  
			<a href="../ajudaTroca/"><img src="/osindicadosmedia/img/reload.png" width="" height="32px" style="border-style: none"/></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
            {% if not eliminadas %}<a href="#" onclick="ajudaElimina(); return false;"><img src="/osindicadosmedia/img/strikethrough.png" width="" height="32px" style="border-style: none"/></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   {% endif %}    
			<a href="../ajudaTempo/" onclick="alert('Aumentando seu tempo...'); return false;"><img src="/osindicadosmedia/img/ampulheta.jpg" width="" height="32px" style="border-style: none"/></a>
			<br/>
			{{ ajudas.troca|imprimirEstrelas|safe }} &nbsp;&nbsp;&nbsp;&nbsp;
			{{ ajudas.elimina|imprimirEstrelas|safe }} &nbsp;&nbsp;&nbsp;&nbsp;
			{{ ajudas.tempo|imprimirEstrelas|safe }}
			-->
			
			<table id="table-ajudas">
			    <tr>
			         <td>
			             {% if ajudas.troca %}
			                 <a href="../ajudaTroca/">
                                <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/reload.png" title="Trocar Pergunta" alt="Trocar Pergunta">
                             </a>
			             {% else %}
			                 <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/reloaddisabled.png" title="Voc&ecirc; j&aacute; esgotou suas ajudas de troca!" alt="Voc&ecirc; j&aacute; esgotou suas ajudas de troca!">
			             {% endif %}
			         
			            
			         </td>
			         <td>
			             {% if ajudas.elimina and not eliminadas%}
				             <a onclick="ajudaElimina(); return false;" href="#" id="linkElimina">
				                 <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/strikethrough.png" title="Eliminar duas alternativas" alt="Eliminar duas alternativas">
				             </a>
			             {% else %}
                             <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/strikethroughdisabled.png" title="Voc&ecirc; j&aacute; esgotou suas ajudas de elimina&ccedil;&atilde;o" alt="Voc&ecirc; j&aacute; esgotou suas ajudas de elimina&ccedil;&atilde;o!">
                         {% endif %}
			         </td>
			         <td>
			             {% if ajudas.tempo %}
				             <a onclick="$('#timer').countdown('change', {until: (($('#timer').countdown('getTimes'))[6]+30)}); aumentarTempo(); return false;" href="../ajudaTempo/" id="linkTempo">
				                 <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/ampulheta.jpg" title="Aumentar o tempo" alt="Aumentar o tempo">
				             </a>
			             {% else %}
                             <img height="32px" width="" style="border-style: none;" src="/osindicadosmedia/img/ampulhetadisabled.jpg" title="Voc&ecirc; j&aacute; esgotou suas ajudas de tempo!" alt="Voc&ecirc; j&aacute; esgotou suas ajudas de tempo!" >
                         {% endif %}
			         </td>
			    </tr>
			    <tr>
			         <td>{{ ajudas.troca|imprimirEstrelas|safe }}</td>
			         <td id="imagensElimina">{{ ajudas.elimina|imprimirEstrelas|safe }}</td>
			         <td id="imagensTempo">{{ ajudas.tempo|imprimirEstrelas|safe }}</td>
			    </tr>
			</table>
			
			
		</div>
		
		<!-- 
		<div id="tema">
            Tema: {{ pergunta.idAssunto.id|getImagem|safe }} <br/>
        </div>
        -->
	
	
{% endblock tela %}

{% block sidebar %}	
	
	<h1 class="sidebar">Voc&ecirc; est&aacute; assistindo:</h1>
	
	<!--  
	Temas jogo: <br/>	 
	<ul>
	       {% for temajogo in temasjogo %}
               <li>{{ temajogo }}</li>
            {% endfor %}
	</ul>
	
	Confs.Temas:
	<ul>
	       {% for tema in confs.temas %}
                <li>{{tema}}</li>
            {% endfor %}
	</ul>
	-->
	
	
	
	    
	           
	     {% for temajogo in temasjogo %}
                {% if temajogo in confs.temas %}
                    <!-- <span class="in">{{ temajogo }} in</span> -->
                
                    <label class="temaselecionado ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon" for="{{ temajogo }}">
                        <span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>
                        <span class="ui-button-text" style="text-align: left; cursor: default;">{{ temajogo }}</span>
                    </label>
                    
                    
                {% else %}
                    <!-- <span class="out">{{ temajogo }} out</span> -->
                    <label for="{{ temajogo }}" class="temaselecionado ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon" aria-pressed="false" role="button" aria-disabled="false">
                        <span class="ui-button-icon-primary ui-icon ui-icon-circle-check naoselecionado" id="naoselecionado-{{forloop.counter}}"></span>
                        <span class="ui-button-text" style="text-align: left; cursor: default;">{{ temajogo }}</span>
                    </label>
                    
                    
                {% endif %}
            {% endfor %}
        
        
        <br/>
        <br/>
    
        <h1 class="sidebar">Dificuldade:</h1>
        
        
        <p class="nomeDificuldade">{{ confs.dificuldade|nomeDificuldade|safe }}</p>
	    
	    <p style="text-align: center;">
		    <a href="../config/" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="width: 90%; ">
		       <span class="ui-button-text">Iniciar nova Partida</span>
		    </a>
	    </p>
	    <!-- 
	    <li>{% for temaselecionado in confs.temas %}
                {% if temaselecionado in temasjogo %}
                    {{ temaselecionado }} in
                {% else %}
                    {{ temaselecionado }} out
                {% endif %}
            {% endfor %}
        </li>
        
        <li>
            {% for temajogo in temasjogo %}
                    {{ temajogo }}
            {% endfor %}
        </li>
        -->
		
{% endblock sidebar %}